<template>
		<!-- 正在阅读 -->
		<view class="bs_reading" v-for="(item, read_id) in bookItem" :key="read_id">
			<view class="read_left">
				<image :src="item.read_img" mode="widthFix"></image>
			</view>
			<view class="read_right">
				<text>{{item.read_name}}</text>
				<text>{{item.read_content}}</text>
				<text>阅读时长：{{item.read_num}}小时</text>
				<button class="read_btn" @tap="toBookDetail">继续阅读</button>
			</view>
		</view>
</template>

<script>
	export default {
		name:"MyReading",
		data() {
			return {
				// 阅读
				bookItem: [{
					read_id: '001',
					read_img: '/static/novel1.jpg',
					read_name: '我在精神病院学斩神',
					read_content: '你是否想过，在霓虹璀璨的都市之下，潜藏着来自古老神话的怪物？',
					read_num: '72'
				}, ],
				
			};
		},
		methods: {
			toBookDetail() {
					// 使用 uni.navigateTo 进行页面跳转
					uni.navigateTo({
						url: '/pages/bookDetail/bookDetail'
					});
				}
			
		}
	}
</script>

<style lang="scss">
		// 正在阅读
		.bs_reading {
			// width: 100%;
			display: flex;
			// border: 1px solid #ccc;
			border-radius: 20rpx;
			// 顺时针 上 右 下 左
			padding: 24rpx 24rpx 18rpx 24rpx;
			margin: 40rpx 0 30rpx 0;
			
			// 添加阴影
			// 水平 垂直 半径 颜色
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);

			.read_left {
				width: 30%;

				image {
					width: 160rpx;
					height: 260rpx;
					// margin-left: 10rpx;
					border-radius: 10rpx;
				}
			}

			.read_right {
				width: calc(100% - 30%);
				display: flex;
				flex-wrap: wrap;

				text:nth-child(1) {
					font-weight: bold;
				}

				text:nth-child(2) {
					font-size: 30rpx;
					color: #999;
					// 省略处理
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				text:nth-child(3) {
					font-size: 30rpx;
					color: #999;
				}

				.read_btn {
					width: 110px;
					height: 80rpx;
					color: #fff;
					font-size: 32rpx;
					background-color: #ff5e48;
					border-radius: 68rpx;
				}
			}
		}
</style>